<template>
  <div>
    <div class="record-box pad-l-15 pad-r-13 pad-t-21" v-if="objDateKey.length">
      <div class="record-items" v-for="(item, key) of objDateKey" :key="key">
        <div v-for="(subitem, index) of objDate[item]" :key="index">
          <div class="record flex-col">
            <span class="font-12 font-color-3" v-if="!index">{{subitem.createTime}}</span>
            <div class="flex-col record-content font-color-3 mar-t-7">
              <div v-if="subitem.status ===1">
                <img class="width-86 height-50" :src="subitem.proofPaymentImage" alt="" v-if="subitem.proofPaymentImage">
              </div>
              <span class="mar-b-7 font-15 font-w" v-if="subitem.status === 2 || subitem.status === 3">{{subitem.statusName}}: {{subitem.refuseReason}}</span>
              <span class="font-12" v-if="subitem.status === 1">审核中 提交于{{subitem.createTime}}</span>
              <span class="font-12" v-if="subitem.status === 3">回馈于 {{subitem.createTime}}</span>
              <span class="font-12"  @click="$pt.setClipboardData({data: subitem.applyNo})">申请单号：{{subitem.applyNo}}</span>
            </div>
          </div>
          <div class="dot-icon">
            <span :class="key === 0? 'active-dot':'dis-dot'"></span>
          </div>
        </div>
        <div class="step-line" v-if="key !== objDateKey.length - 1"></div>
      </div>
    </div>
    <div v-else class="flex flex-center mar-t-30 font-color-9">
      暂无申请记录
    </div>
    <!-- 底部按钮 -->
    <div class="bottom-btn flex flex-center" v-if="isShowApplyButton">
      <div class="re-submit-btn" @click="resubmit">{{applyButtonText}}</div>
    </div>
  </div>
</template>

<script>
import {pagingProjectOrderOfflinePaymentApplyList} from '@/api/shop'
export default {
  data() {
    return {
      params: {
        enterpriseId: '',
        orderId: '',
        currentPage: 1,
        size: 10
      },
      list: [

      ],
      objDate: {},
      objDateKey: [],
      isShowApplyButton: 0, // 是否显示审核按钮
      applyButtonText: '', // 审核按钮文字
      isCanApply: 0 // 是否能审核
    }
  },
  onLoad(query) {
    this.orderId = ('orderId' in query) ? query['orderId'] : ''
  },
  mounted() {
    this.objDate = {}
    this.objDateKey = []
    this.pagingProjectOrderOfflinePaymentApplyList()
  },
  onReachBottom() {
    // 触底刷新
    this.pagingProjectOrderOfflinePaymentApplyList()
  },
  methods: {
    pagingProjectOrderOfflinePaymentApplyList() {
      this.params.enterpriseId = this.getEnterpriseId
      this.params.orderId = this.orderId
      pagingProjectOrderOfflinePaymentApplyList(this.params).then(res => {
        const { records } = res.data
        this.isShowApplyButton = res.data.isShowApplyButton
        this.applyButtonText = res.data.applyButtonText
        this.isCanApply = res.data.isCanApply
        records.forEach(item => {
          let date = item.createTime.split(' ')[0]
          if (date in this.objDate) {
            this.objDate[date].push(item)
          } else {
            this.$set(this.objDate, date, [])
            this.objDate[date].push(item)
          }
        })
        this.objDateKey = Object.keys(this.objDate)
        let index = this.objDateKey.findIndex(function(item) {
          return item === '__keyPath'
        })
        if (index > -1) {
          this.objDateKey.splice(index, 1)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    resubmit() {
      if (this.isCanApply) return
      this.$pt.navigateTo({url: `/pages/shop/counter/submit-credentials/main?orderId=${this.orderId}`})
    }
  }
}
</script>

<style scoped lang="less">
  .record-items {
    position: relative;
    padding-left: 20px;
    padding-bottom: 11px;
    .record {
      padding-left: 7px;
    }
    .record-content {
      background: #fff;
      padding-left: 12px;
      padding-right: 12px;
      padding-top: 10px;
      padding-bottom: 11px;
    }
    .step-line {
      width: 1px;
      position: absolute;
      height: 100%;
      top: 16px;
      left: 11px;
      background: #EBEBEB;
    }
    .active-dot {
      position: absolute; 
      top: 0px;
      left: 0px;
      width: 10px;
      height: 10px;
      background:#FF4E23 ;
      border-radius: 50%;
      border: 6px solid #F7E1D2;
    }
    .dis-dot {
      position:absolute;
      top: 5px;
      left: 6px;
      width: 10px;
      height: 10px;
      background: #C0C0C0;
      border-radius: 50%;
    }
  }
  .bottom-btn {
    width: 375px;
    height: 81px;
    background: #FFFFFF;
    border: 1px solid #F1F1F1;
    position: fixed;
    bottom: 0;
    left: 0;
    .re-submit-btn {
      width: 345px;
      height: 45px;
      background: #FF4E23;
      border-radius: 23px;
      color: #fff;
      font-size: 19px;
      font-weight: 700;
      text-align: center;
      line-height: 45px;
    }
  }

</style>